<template>
	<view>
		<view class="header" >
			<view :class="{selectOne:isSelect==0}" @tap="isSelectFun(0)">小票打印</view>
			<view :class="{selectTwo:isSelect==1}"  @tap="isSelectFun(1)">远程打印</view>
		</view>
		<view class="container">
			<view class="xpPrint" v-if="isSelect==0">
				<view class="cu-form-group" >
					<view class="title">打印机型号:</view>
					<input class="inpt"   name="input"  placeholder="点击选取型号" disabled data-target="printModal" @tap="showModal"></input>
				</view>
				<view class="cu-form-group" >
					<view class="title">宽度 :</view>
					<input class="inpt"  name="input"  placeholder="点击选取宽度" disabled data-target="WidthModal" @tap="showModal"></input>
				</view>
				<view class="cu-form-group" >
					<view class="title">标题大小:</view>
					<input class="inpt"  name="input"  placeholder="点击填写标题大小"  type="number"></input>
				</view>
				<view class="cu-form-group" >
					<view class="title">内容大小:</view>
					<input class="inpt"   name="input"  placeholder="点击填写内容大小"  type="number"></input>
				</view>
				<view class="cu-form-group" >
					<view class="title">附加标题1:</view>
					<input class="inpt"   name="input"  placeholder="点击填写附加标题1"></input>
				</view>
				<view class="cu-form-group" >
					<view class="title">附加标题2:</view>
					<input class="inpt"   name="input"  placeholder="点击填写附加标题2"></input>
				</view>
				<view class="cu-form-group" >
					<view class="title">附加表尾1:</view>
					<input class="inpt"   name="input"  placeholder="点击填写附加标题1"></input>
				</view>
				<view class="cu-form-group" >
					<view class="title">附加表尾2:</view>
					<input class="inpt"   name="input"  placeholder="点击填写附加表尾2"></input>
				</view>
				<view class="cu-form-group" >
					<view class="title">附加表尾3:</view>
					<input class="inpt"   name="input"  placeholder="点击填写附加表尾3"></input>
				</view>
				<view class="cu-form-group" >
					<view class="title">单据名称:</view>
					<!-- <checkbox-group  @change="print">
						<checkbox :value="isPrint">是否打印</checkbox>
					</checkbox-group> -->
					<view  class="isPrintCk" @tap="changeCk">
						<checkbox  :checked="isPrint!=0" />是否打印
					</view>
					
				</view>
				<view class="cu-form-group" >
					<view class="title">走纸行数:</view>
					<input class="inpt"   name="input"  placeholder="点击填写走纸行数"></input>
				</view>
				<view class="cu-form-group" >
					<view class="title">打印份数:</view>
					<input class="inpt"   name="input"  placeholder="点击填写打印份数"></input>
				</view>
			</view>
			<view class="ycPrint" v-if="isSelect==1" >
				<view class="cu-form-group" >
					<view class="title">打印后台编号:</view>
					<input class="inpt"   name="input"  placeholder="点击选取编号" data-target="YcPrintModal" disabled="" @tap="showModal"></input>
				</view>
				<view class="cu-form-group" >
					<view class="title">打印份数:</view>
					<input class="inpt"   name="input"  placeholder="点击填写份数"></input>
				</view>
				<view class="cu-form-group" >
					<view class="title">远程打印格式:</view>
					<input class="inpt"   name="input"  placeholder="点击选取格式" data-target="YcPrintFormatModal"  @tap="showModal"></input>
				</view>
				<view class="cu-form-group" >
					<view class="title">ScoketIP:</view>
					<input class="inpt"  name="input"  placeholder="点击填写IP"></input>
				</view>
				<view class="cu-form-group" >
					<view class="title">Socket端口:</view>
					<input class="inpt"  name="input"  placeholder="点击填写端口"></input>
				</view>
			</view>
		</view>
	    <view class="footer">
			<button>保存</button>
		</view>
		
		
		<!-- 弹框 -->
		<!-- 打印机 -->
		<view class="cu-modal" :class="modalName=='printModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">请选择打印机</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<!-- <view class="searchStore">
						<input placeholder="请输入仓库名称" v-model="SearchStoreName" @input="filterStore" />
						<button @tap="searchStore">搜索</button>
					</view> -->
					<view class="StoreListWrap">
						<view v-for="(item,index) in printList" :key="index" @tap="selectprint(index)"></view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 宽度 -->
		<view class="cu-modal" :class="modalName=='WidthModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">请选择宽度</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<!-- <view class="searchStore">
						<input placeholder="请输入仓库名称" v-model="SearchStoreName" @input="filterStore" />
						<button @tap="searchStore">搜索</button>
					</view> -->
					<view class="StoreListWrap">
						<view v-for="(item,index) in WidthList" :key="index" @tap="selectprint(index)"></view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 宽度 -->
		<!-- <view class="cu-modal" :class="modalName=='WidthModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">请选择宽度</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					 <view class="searchStore">
						<input placeholder="请输入仓库名称" v-model="SearchStoreName" @input="filterStore" />
						<button @tap="searchStore">搜索</button>
					</view> -->
				<!-- 	<view class="StoreListWrap">
						<view v-for="(item,index) in WidthList" :key="index" @tap="selectprint(index)"></view>
					</view>
				</view>
			</view>
		</view> -->
		
		<!-- 远程打印机 -->
		<view class="cu-modal" :class="modalName=='YcPrintModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">请选择打印机编号</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<!-- <view class="searchStore">
						<input placeholder="请输入仓库名称" v-model="SearchStoreName" @input="filterStore" />
						<button @tap="searchStore">搜索</button>
					</view> -->
					<view class="StoreListWrap">
						<view v-for="(item,index) in YcPrintList" :key="index" @tap="selectYcPrint(index)">{{item}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 远程打印格式 -->
		<view class="cu-modal" :class="modalName=='YcPrintFormatModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">请选择打印格式</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<!-- <view class="searchStore">
						<input placeholder="请输入仓库名称" v-model="SearchStoreName" @input="filterStore" />
						<button @tap="searchStore">搜索</button>
					</view> -->
					<view class="StoreListWrap">
						<view v-for="(item,index) in YcPrintFormatList" :key="index" @tap="selectYcPrint(index)"></view>
					</view>
				</view>
			</view>
		</view>
			
	</view>
</template>
<script> 
	export default{
		data(){
			return {
				isPrint:"0",
				isSelect:0,
				printList:[],//打印机列表
				modalName:"",
				WidthList:[],//宽度列表
				YcPrintList:["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20"],
				YcPrintFormatList:[]
			}
		},
		methods:{
			print(e){				
				// console.log(e);
				this.isPrint = this.isPrint == "0"?"1":"0";
				// console.log(this.isPrint);
			},
			isSelectFun(type){
				this.isSelect = type;
			},
			hideModal(){
				this.modalName = "";
			},
			showModal(e){
				console.log(e);
				this.modalName = e.currentTarget.dataset.target;
			},
			changeCk(){
				this.isPrint = this.isPrint == "0"?"1":"0";
			}
			
		}
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 50px;
	}
	.header{
		width: 100%;
		height: 40px;
		line-height: 40px;
		display: flex;
		justify-content: center;
		border-bottom: 1px solid #ebebeb;
		position: fixed;
		background: #FFF;
		z-index: 9999;
		view{
			flex: 1;
			text-align: center;
		}
		
	}
	.container{
		padding-top: 45px;
		
		.isPrintCk{
			flex: 1;
		}
	}
	.footer{
		width: 100%;
		height: 45px;
		line-height: 45px;
		background: #FFF;
		z-index: 9999;
		border-top:1px solid #ebebeb;
		position: fixed;
		bottom: 0px;
		
		button{
			width: 96%;
			height: 35px;
			line-height: 35px;
			background: #0081FF;
			color: #FFF;
			border-radius: 5px;
			margin: auto;
			margin-top: 5px;
		}
	}
	
	.selectOne{
		color: #0081FF;
		border-bottom: 1px solid #0081FF;
	}
	.selectTwo{
		color: #0081FF;
		border-bottom: 1px solid #0081FF;
	}
	
	
	
	
	/* 弹框样式 */
	 .padding-xl .searchStore {
	 	display: flex;
	 	width: 100%;
	 	margin: auto;
	 	height: 45px;
	 	padding-top: 5px;
	 	font-size: 14px;
	 }
	
	 .padding-xl .searchStore input {
	 	flex: 1;
	 	height: 35px;
	 	border: 1px solid #CCC;
	 	border-top-left-radius: 5px;
	 	border-bottom-left-radius: 5px;
	 	padding-left: 10px;
	 }
	
	 .padding-xl {
	 	padding: 10px;
	
	 }
	
	 .padding-xl .searchStore button {
	 	font-size: 14px;
	 	color: #FFF;
	 	padding-left: 8px;
	 	padding-right: 8px;
	 	height: 35px;
	 	line-height: 35px;
	 	border-radius: 0px;
	 	border-top-right-radius: 5px;
	 	border-bottom-right-radius: 5px;
	 	text-align: center;
	 	background: rgba(124, 170, 216, 1);
	 }
	
	 .padding-xl .StoreListWrap {
	 	height: 250px;
	 	overflow: auto;
	 }
	
	 .padding-xl .StoreListWrap view {
	 	height: 40px;
	 	line-height: 40px;
	 	text-align: left;
	 	border-bottom: 1px solid #CCC;
	 	padding-left: 8px;
	 }
	
	 .cu-form-group {
	 	padding: 1px 10px !important;
	 	height: 40px;
	 	line-height: 40px;
	 	min-height: 40px;
	 }
	
	 /* 表头 */
	 .tabHeader {
	 	width: 100%;
	 	height: 200px;
	 	overflow: hidden;
	 	position: relative;
	 	padding-bottom: 40px;
	 }
	
	 .tabHeader.tabHeaderMore {
	 	width: 100%;
	 	display: table;
	 }
	
	 .inpt1 {
	 	text-align: left;
	 }
	
	 /* 查看更多按钮 */
	 .lookHeaderMore {
	 	width: 100%;
	 	position: absolute;
	 	bottom: 0px;
	 	left: 0px;
			z-index: 100;
	 }
	
	.nowGoodCount {
		width: 100%;
		height: 40px;
		line-height: 40px;
		padding-left: 5%;
		background: #FFF;
		display: flex;
		position: fixed;
		bottom: 0px;
		left: 0px;
		border-top: 1px solid #CCC;
		z-index: 999;
		background: rgba(124, 170, 216, 1);
		color:#FFF;
	}
	.nowGoodCount view {
		flex: 1;
		box-sizing: border-box;
	}
	
	 /* 返回顶部按钮 */
	 .quiteTop {
	 	width: 50px;
	 	height: 50px;
	 	padding-top: 5px;
	 	line-height: 20px;
	 	background: rgba(0, 0, 0, .8);
	 	border-radius: 25px;
	 	text-align: center;
	 	font-size: 12px;
	 	position: fixed;
	 	bottom: 20px;
	 	right: 10px;
	 	z-index: 999;
	 	color: #FFF;
	 }
		.picker{
		   text-align: left !important;	
		}
		
	 .red{
			color: red;
		}
		.padding-xl .GoodsListWrap {
			height: 250px;
			overflow: auto;
		}
		
		.padding-xl .GoodsListWrap view {
			height: 40px;
			padding: 3px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 5px;
		}
		
		.padding-xl .GoodsListWrap view image {
			width: 40px;
			height: 40px;
		}
		
		.padding-xl .GoodsListWrap view text {
			flex: 1;
			height: 40px;
			line-height: 40px;
			text-align: left;
			padding-left: 10px;
			box-sizing: border-box;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
		
		checkbox{
		   margin-right: 10upx;	
		}
</style>
